<template>
  <!-- 页面布局card通用组件 -->
  <PageCard>
    <!-- 头部工具栏 -->
    <ToolBar>
      <el-form :model="queryForm" label-width="80px">
        <el-row :gutter="24">
          <el-col :span="4" class="barMarginBottom">
            <el-button
              v-show="$btnPermission.verify('quickAdd')"
              type="primary"
              :loading="loading"
              @click="addQuickQuery"
              >新增</el-button
            >
            <el-button
              v-show="$btnPermission.verify('quickAdd')"
              type="default"
              :loading="loading"
              @click="quickQuerySync"
              >同步</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </ToolBar>

    <!-- 表格 -->
    <TablePage
      ref="quickQueryTablePage"
      :customTableHeight="295"
      :loading.sync="loading"
      :table-data="quickQueryTableDatas"
      :columns="columns"
      @reloadData="loadTableData"
    />

    <!-- 新增 -->
    <AddEditModel
      :visible.sync="addQuickModelConfig.visible"
      :title="addQuickModelConfig.title"
      :rowId.sync="addQuickModelConfig.id"
      @reloadData="loadTableData"
    >
    </AddEditModel>
  </PageCard>
</template>
<script>
import PageCard from "@/components/PageCard/index.vue";
import ToolBar from "@/components/ToolBar/index.vue";
import TablePage from "@/components/TablePage/index.vue";

import AddEditModel from "./components/AddEditModel.vue";

import { quickQueryPage, quickQuerySync } from "@/api/quick-query";

export default {
  name: "GoodsQuickQueryPage",
  components: {
    PageCard,
    ToolBar,
    TablePage,
    AddEditModel,
  },
  data() {
    return {
      loading: false,
      addQuickModelConfig: {
        id: void 0,
        visible: false,
        title: "",
      },
      queryForm: null,
      initForm: {},
      quickQueryTableDatas: [],
      columns: [
        {
          title: "名称",
          name: "quickName",
          width: 150,
          align: "center",
        },
        {
          title: "备注",
          name: "quickRemark",
          width: 250,
          align: "center",
        },
        {
          title: "启用状态",
          name: "isEnabled",
          width: 150,
          align: "center",
          select: true,
          options: this.$config.ENABLED_STATUS,
        },
        {
          title: "排序值",
          name: "quickSort",
          width: 150,
          align: "center",
        },
        {
          title: "操作",
          name: "operate",
          width: 100,
          align: "center",
          operate: [
            {
              name: "编辑",
              permission: "QuickEdit",
              fun: this.quickEdit,
              customStyle: {
                "margin-left": "10px",
              },
            },
          ],
        },
      ],
    };
  },
  created() {
    this.queryForm = { ...this.initForm };
    this.$nextTick(() => {
      this.loadTableData();
    });
  },
  methods: {
    // 加载数据
    async loadTableData() {
      this.loading = true;
      const { pageNumber, pageSize } = this.$refs.quickQueryTablePage.page;
      const res = await quickQueryPage({
        pageNumber,
        pageSize,
        ...this.queryForm,
      });
      this.$refs.quickQueryTablePage.page.pageNumber = res.data.pageNumber;
      this.$refs.quickQueryTablePage.page.pageSize = res.data.pageSize;
      this.$refs.quickQueryTablePage.page.total = res.data.total;
      this.quickQueryTableDatas = res.data.rows;
      this.loading = false;
    },
    // 新增
    async addQuickQuery() {
      this.addQuickModelConfig.title = "新增";
      this.addQuickModelConfig.visible = true;
    },
    // 编辑
    async quickEdit(row) {
      if (!row) return;
      this.addQuickModelConfig.title = "编辑";
      this.addQuickModelConfig.id = row.id;
      this.addQuickModelConfig.visible = true;
    },
    // 同步
    async quickQuerySync() {
      try {
        await quickQuerySync();
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>
<style lang="scss" scoped></style>
